<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
  	<title>商品详情--东西互联网</title>
    <link rel="stylesheet" href="css/mui.css" />
    <link rel="stylesheet" href="css/muiicon.css" />
    <link rel="stylesheet" href="css/jquery.mmenu.all.css" />
    <link rel="stylesheet" href="css/default.css" />
    <style>
    		.slideBox{height: 300px;}
		.slideBox .bd img{height:300px;}
		@media only screen and  (max-height: 480px) {
			.slideBox{height: 200px;}
			.slideBox .bd img{height:200px;}
		}
		@media only screen and  (max-height: 320px) {
			.slideBox{height: 140px;}
			.slideBox .bd img{height:140px;}
		}
    </style>
</head>
	<body>
			<div class="page">
				<header class="mui-bar mui-bar-nav" >
					 <a href="javascript:history.back();"  class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span> <span class="title">商品详情</span></span>
					</a>
					<h1 class="mui-title" id="title"></h1>
					<a	 id="search"	href="#searchCategory"  class="mui-btn mui-btn-link mui-pull-right"></a>
				</header>
				<div class="mui-content">
					<!-- 产品详情  -->
					<div id="slideBox" class="slideBox">
						<div class="hd">
							<ul><li>1</li><li>2</li></ul>
						</div>
						<div class="bd">
							<ul>
								<li><a ><img src="img/slide1.jpg" /></a></li>
								<li><a ><img src="img/slide2.jpg" /></a></li>
							</ul>
						</div>
						<!-- 前/后按钮代码 -->
						<a class="prev" href="javascript:void(0)"></a>
						<a class="next" href="javascript:void(0)"></a>
					</div>
					<div class="product-info">
							<h3>珍珠吊坠</h3>
							<ul class="mui-table-view  mui-input-group">
								<li class="mui-input-row">
									<label>型号：</label>
									<input type="text" value="zd000177" disabled>
								</li>
								<li class="mui-input-row">
									<label>主石：</label>
									<input type="text" value="7.5mm" disabled>
								</li>
								<li class="mui-input-row">
									<label>副石：</label>
									<input type="text" value="0.225ctx19粒" disabled>
								</li>
								<li class="mui-input-row">
									<label>18k：</label>
									<input type="text" value="3.4g" disabled>
								</li>
								<li class="mui-input-row" style="height: auto;">
									<label>	珍珠大小：</label>
									 <ul class="zhenzhu-size-list">
									 	<li>7-8cm</li> 
									 	<li>7-8cm</li>
									 	<li>7-8cm</li>
									 	<li>7-8cm</li>
									 	<li>7-8cm</li>
									 </ul>
								</li>
								<li class="mui-input-row" style="height: auto;">
									<label>商品备注：</label>
									<textarea cols="20" rows="2" placeholder="填写备注" style="border: 1px solid #ddd;margin: 3px;padding-left: 3px;"></textarea>
								</li>
								<li class="mui-input-row">
									<label>库存：</label>
									<input type="text" value="10000" disabled>
								</li>
								<li class="mui-input-row">
									<label>购买数量：</label>
									<div class="mui-numbox"  data-numbox-min='1' data-numbox-max='10000' style="float: left;">
										<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
										<input class="mui-numbox-input"  type="number" />
										<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
									</div>
								</li>
							</ul>
							 <h4>商品详情</h4>
							<div class="product-info-tab">
								<img src="img/category_zhenzhu.jpg">
								<img src="img/category_feicui.jpg">
							</div>
					</div>
				</div>
				<div class="product-info-goumai">
					<span class="price mui-pull-left">200.00</span>
					<a class="mui-btn mui-btn-danger mui-pull-right" style="background-color: rgb(224,125,125);">加入购物车</a>
				</div>
				<!-- end 产品详情  -->
			</div>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/jquery.mmenu.min.all.js" ></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js" ></script>
		<script type="text/javascript" src="js/mui.min.js" ></script>
		<script>
			 $(function(){
			 	  //轮播
				jQuery(".slideBox").slide({mainCell:".bd ul",effect:'leftLoop',autoPlay:true,trigger:'mouseover',easing:'swing',delayTime:500,mouseOverStop:true,pnLoop:true});
			 
			 });
		</script>
	</body>
</html>
